<template>
  <div>

    <div class="top_nav">
      <button class="top_btn" :title="top_title" @click="onTopping"></button>
      <button class="min_btn" title="最小化" @click="onMinimize"></button>
      <button class="max_btn" :title="max_title" :style="{backgroundImage:'url('+ max_icon +')'}"
              @click="onMaximize"></button>
      <button class="close_btn" title="关闭" @click="onClose"></button>
    </div>

    你好
  </div>
</template>

<script>


export default {
  name: "Home",
  data() {
    return {
      top_title:"置顶",
      max_title: "最大化",
      max_icon: require("../assets/max.png"),
    }
  },
  mounted() {
    //监听窗口变化
    this.$electron.ipcRenderer.on('restoreMaximize', (event, data) => {
      switch (data) {
        case 'restore':
          this.max_title = "最大化";
          this.max_icon = require("../assets/max.png");
          break;
        case 'maximize':
          this.max_title = "向下还原";
          this.max_icon = require("../assets/reset_max.png");
          break;
      }
    });

    this.$electron.ipcRenderer.on('alwaysOnTop',(event,data)=>{
      switch (data) {
        case 'yes':
            this.top_title = "取消置顶";
          break;
          case 'no':
            this.top_title = "置顶";
            break;
      }
    })
  },
  methods: {
    //置顶功能
    onTopping() {
      this.$electron.ipcRenderer.send('window-top');
    },


    //最小化
    onMinimize() {
      this.$electron.ipcRenderer.send('window-min');
    },
    //最大化
    onMaximize() {
      this.$electron.ipcRenderer.send('window-max');
    },
    //关闭
    onClose() {
      this.$electron.ipcRenderer.send('window-close');
    }
  }
}
</script>

<style scoped lang="scss">
.top_nav {
  height: 32px;
  background: #fff;
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  button {
    border: none;
    background: none;
    -webkit-app-region: no-drag;
    outline: none;
  }

  button:focus {
    outline: none;
  }

  /*for IE*/
  button::-moz-focus-inner {
    border-color: transparent;
  }

  /*for mozilla*/
  button:focus {
    border: none;
  }

  .top_btn, .min_btn, .max_btn, .close_btn {
    width: 45px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
  }

  .top_btn:hover,
  .min_btn:hover,
  .max_btn:hover {
    cursor: pointer;
    background-color: #e5e5e5;
  }

  .close_btn:hover {
    background-image: url("../assets/hover_close.png");
    cursor: pointer;
    background-color: #f10707;
  }

  .top_btn {
    background-image: url("../assets/topping.png");
  }

  .min_btn {
    background-image: url("../assets/min.png");
  }

  .close_btn {
    background-image: url("../assets/close.png");
  }
}
</style>
